<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-card>
          <div
            slot="header"
            class="clearfix"
            style="text-align: center"
          >
            <span>我的通知</span>
          </div>
          <el-table
            :data="tableData"
            border
            :default-sort="{ prop: 'date', order: 'descending' }"
            style="width: 100%"
          >
            <el-table-column
              prop="n_id"
              sortable
              label="序列号"
              align='center'
            >
            </el-table-column>

            <el-table-column
              prop="username"
              label="发布人"
              align='center'
            >
            </el-table-column>

            <el-table-column
              label="发布人权限"
              align='center'
            >
              <template slot-scope="{row}">
                <el-tag :type='row.type | typeColorFilter'>
                  {{ row.type | typeFilter}}
                </el-tag>

              </template>
            </el-table-column>

            <el-table-column
              prop="title"
              label="主题"
              align='center'
            > </el-table-column>
            <el-table-column
              label="状态"
              align='center'
            >
              <template slot-scope="{row}">
                <el-tag
                  size="medium"
                  type="info"
                  v-if=" row.type1 == '未读'"
                >
                  {{ row.type1 }}
                </el-tag>
                <el-tag
                  size="medium"
                  type="success"
                  v-else
                >
                  {{ row.type1 }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column
              label="创建时间"
              align='center'
            >
              <template slot-scope="{row}">{{
                row.createtime
              }}</template>
            </el-table-column>
            <!-- 隐藏已读标识 -->
            <el-table-column
              prop="flag"
              v-if="false"
              label="标识"
              min-width="200px"
            >
            </el-table-column>
            <el-table-column
              label="操作"
              align='center'
            >
              <template slot-scope="scope">
                <el-button
                  style="margin-left: 10px"
                  type="primary"
                  size="mini "
                  @click="readY(scope.$index, scope.row)"
                >
                  查看详情
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <div
            class="block"
            style="text-align: center; margin-top: 20px"
          >
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[5, 10, 15, 20, 25]"
              :page-size="5"
              layout="total, sizes, prev, pager, next, jumper"
              :total="UserSize"
            >
            </el-pagination>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-dialog
      title="通知"
      :visible.sync="centerDialogVisible"
      center
    >
      <el-form
        :model="temp"
        label-position="left"
        label-width="70px"
      >
        <el-form-item
          label="通知标题"
          label-width="120px"
        >

          <span>{{temp.title}}</span>
        </el-form-item>
        <el-form-item
          label="内容"
          label-width="120px"
        >
          <span>{{temp.content}}</span>
        </el-form-item>

        <el-form-item
          label="通知班级"
          label-width="120px"
        >
          <span>{{temp.classes}}</span>
        </el-form-item>

        <el-form-item
          label="创建时间"
          label-width="120px"
        >
          <span>{{temp.createtime}}</span>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  goyidu,
  getNoticeRead,
  getNotice,
} from "../../api/student-api/myNotice";

// function date(time) {
//   var dt = new Date(time);
//   // yyyy-mm-dd
//   var y = dt.getFullYear();
//   var m = dt.getMonth() + 1;
//   var d = dt.getDate();
//   var hh = dt.getHours();
//   var mm = dt.getMinutes();
//   var ss = dt.getSeconds();
//   return y + "-" + m + "-" + d + "  " + hh + ":" + mm + ":" + ss;
// }

export default {
  name: "myNotice",
  data() {
    return {
      centerDialogVisible: false,
      show: true,
      UserSize: 0,
      currentPage: 1,
      tableData: [],
      pageSize: 5,
      pageNo: 1,
      flagStatus: 0,
      temp: {
        content: "",
        title: "",
        createtime: "",
        classes: "",
      },
    };
  },
  created() {
    this.getvalue(this.pageSize, this.pageNo);
  },
  filters: {
    date(time) {
      var dt = new Date(time);
      // yyyy-mm-dd
      var y = dt.getFullYear();
      var m = dt.getMonth() + 1;
      var d = dt.getDate();
      var hh = dt.getHours();
      var mm = dt.getMinutes();
      var ss = dt.getSeconds();
      return y + "-" + m + "-" + d + "  " + hh + ":" + mm + ":" + ss;
    },
    // 权限
    typeColorFilter(type) {
      const typeMap = {
        1: "success",
        2: "warning",
        3: "",
      };
      return typeMap[type];
    },
    typeFilter(i) {
      if (i == 1) {
        return "管理员";
      }
      if (i == 2) {
        return "教师";
      }
      if (i == 3) {
        return "学生";
      }
    },
  },
  methods: {
    /**
     * 我的通知分页获取数据与数量
     * */
    getvalue(pageNum, currPage) {
      getNotice(pageNum, currPage).then((res) => {
        this.UserSize = res.data.total;
        res.data.data.forEach((v, i) => {
          v.type1 = "未读";
        });
        this.tableData = res.data.data;
        this.getnew();
      });
    },
    /**
     * 已读与未读转换
     * @param index
     * @param row
     */
    // readN(index, row) {
    //     this.$axiosjwt({
    //         url:"/students/goweidu",
    //         method:"get",
    //         data:{
    //             n_id:row.n_id
    //         },
    //         success: (result) => {
    //             this.open2('已修改为未读')
    //             this.getvalue(this.pageSize, this.pageNo);
    //         }
    //     });
    // },

    readY(index, row) {
      this.centerDialogVisible = true;
      this.temp = Object.assign({}, row);
      if (this.temp.type1 == "未读") {
        goyidu(row.n_id).then((res) => {
          this.getnew();
          this.$message({
            message: "通知已阅读",
            type: "success",
          });
        });
      } else {
        this.$message({
          message: "该通知已经查看过了~",
          type: "warning",
        });
      }
    },

    //显示通知页面，返回
    goBack() {
      this.showDialog = false;
    },

    /**
     * 获取的我通知已读列表(供已读未读状态渲染)
     */
    getnew() {
      console.log("进入getnew");
      //等同于绑定
      getNoticeRead().then((res) => {
        res.data.data.forEach((item, index) => {
          let val = item.n_id;
          // console.log(this.tableData);
          this.tableData.forEach((value, index) => {
            // console.log(value);
            if (val == value.n_id && item.flag == 1) {
              value.type1 = "已读";
            }
          });
        });
      });
    },
    //分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.getvalue(this.pageSize, this.pageNo);
    },
    handleCurrentChange(val) {
      this.pageNo = val;
      this.getvalue(this.pageSize, this.pageNo);
    },
  },
};
</script>

<style scoped lang="scss">
</style>
